/*
  学习目标：Route组件的使用说明
*/

import React from 'react';
import { BrowserRouter as Router, NavLink, Route } from 'react-router-dom';
import './index.css';
export default class App extends React.Component {
  render() {
    return (
      <>
        <Router>
          <div>
            <NavLink activeClassName="xxx" exact to="/home/test">
              首页
            </NavLink>
            <br />
            <NavLink activeClassName="xxx" exact to="/home">
              首页2
            </NavLink>
            <br />
            <NavLink to="/my">我的</NavLink>
            <br />
            <NavLink to="/friend">朋友</NavLink>
            {/* Route相当于 规则对象和挂载点二合一 */}
            {/* 1. Route组件未匹配时, 原地返回一个null */}
            {/* 2. 默认从上向下依次匹配, 默认不会停 */}
            <Route path="/home" exact component={Home}></Route>
            <Route path="/home" exact component={Home}></Route>
            <Route path="/home" exact component={Home}></Route>
            {/* 3. Route默认是模糊匹配, 可以使用exact开启精准匹配 */}
            <Route path="/home/test" exact component={Home}></Route>

            {/* 4. 匹配任意路径的三种方法 */}
            {/* 4.1 不写path,  设置exact无效 */}
            <Route component={MyMusic}></Route>
            {/* 4.2 path为/,  可以模糊匹配任意路径 */}
            <Route path="/" component={MyMusic}></Route>
            {/* 👎4.3 path为*, 此时设置exact无效 */}
            <Route path="*" component={MyMusic}></Route>
            <Route path="/my" component={MyMusic}></Route>
            <Route path="/friend" component={Friend}></Route>
          </div>
        </Router>
      </>
    );
  }
}

function Home() {
  return <h1>首页组件</h1>;
}

function MyMusic() {
  return <h1>我的音乐件</h1>;
}

function Friend() {
  return <h1>朋友组件</h1>;
}
